<template>
<!-- 员工管理 -->
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{total}} 条</span>
        </template>
        <template #right>
          <el-button type="warning" v-allow="'import'" size="small" @click="$router.push('/import')">excel导入</el-button>
          <el-button type="danger"  v-allow="'export_excel'" size="small" @click="handleDownload">excel导出</el-button>
          <el-button type="primary" v-allow="'add'" size="small" @click="showDialog=true">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <el-table :data="list" border :default-sort ="{prop:'timeOfEntry',order:'descending'}">
          <el-table-column label="序号" sortable type="index"/>
          <el-table-column label="姓名" sortable prop="username"/>
          <el-table-column label="图像" >
            <template #default="{row}">
                  <img :src="row.staffPhoto" alt="" style="width:100px;height:100px">
            </template>
          </el-table-column>
          <el-table-column label="工号" sortable prop="workNumber"/>

          <el-table-column label="聘用形式"  prop="formOfEmployment">
            <template #default="{row}">
               {{hireTypeFormat(row.formOfEmployment) }}
               <!-- {{hireType[row.formOfEmployment]}} -->
               <!-- {{row.formOfEmployment === 1 ? '正式' : '非正式'}} -->
            </template>
          </el-table-column>

          <el-table-column label="部门"  prop="departmentName"/>
          <el-table-column label="入职时间" sortable prop="timeOfEntry"/>
          <!-- <el-table-column label="账户状态" /> -->
          <el-table-column label="操作" width="280">
            <template #default="{row}">
              <!-- 用查询参数 方法  传递 id -->
              <!-- <el-button type="text" size="small" @click="$router.push(`/employees/detail?id=${row.id}`)">查看</el-button> -->
              <!-- 用 路径参数 方法   传递id -->
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <!-- <el-button type="text" size="small" @click="roleShowDialog=true">分配角色</el-button> -->
              <el-button type="text" size="small" @click="hAssignRole(row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="hDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="prev, pager, next" /><el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 15, 20, 50]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
        </el-row>
      </el-card>

      <!-- 新增员工的弹窗 -->
      <el-dialog title="新增员工" :visible.sync="showDialog" @close="hClose">
       <empDialog ref="empDialog" @success="hSuccess" @close="showDialog=false"></empDialog>
      </el-dialog>

      <!-- 分配角色的弹层 -->
      <el-dialog title="分配角色" :visible.sync="roleShowDialog">
        <!-- 新建子组件 -->
                <!-- v-if 解决数据不更新问题 -->
         <assignRole :roleId="roleId" v-if="roleShowDialog" @close="roleShowDialog=false"></assignRole>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {getEmployees,delEmployees} from '@/api/employees'
import employeesEnum from '@/constant/employees'
import empDialog from '@/views/employees/empDialog.vue'
import assignRole from '@/views/employees/assignRole.vue'
  
  //2 优化代码,优化程序性能  格式枚举聘用形式
  // const hireType={}
  // employeesEnum.hireType.forEach(item=>{
  //   hireType[item.id]=item.value
  // })

  //3 利用reduce函数  获取数组中的元素,转换成对象   acc[item.id]=item.value  ==>1:'正式'
 const hireType=  employeesEnum.hireType.reduce((acc,item)=>{
   acc[item.id]=item.value
   return acc
  },{})
export default {
  components:{
    empDialog,
    assignRole
  },
  data(){
    return {
    // hireType,   //用reduce方法
    roleId:'',
    roleShowDialog:false,   //控制分配角色的弹层显示和隐藏
    showDialog:false, //控制新增员工的弹层显示和隐藏
    list:[],
    page:1,
    size:'',
    total:0
    }
  },
  created(){
    this.loadEmployees()
  },
   methods:{
    hAssignRole(id){
      this.roleId=id
      this.roleShowDialog=true
  
    },
    
dataForm (list){
  // 自定义 一个函数
    const mapInfo = {
                'id': '编号',
                'password': '密码',
                'mobile': '手机号',
                'username': '姓名',
                'timeOfEntry': '入职日期',
                'formOfEmployment': '聘用形式',
                'correctionTime': '转正日期',
                'workNumber': '工号',
                'departmentName': '部门',
                'staffPhoto': '头像地址'
            }
            // 1获取头部
             const one=list[0]  //先取一个
            let headers=[]  //定义一个空的头部
            if(one){ //判断  如果取的这个one 对象,里面有数据,(true)
                console.log('Object.keys(one)',Object.keys(one))//得到
                headers=Object.keys(one).map(enkey=>{
                    return mapInfo[enkey]
                })
            }
            // 2 将每个对象中的值存到一个数组中,将每个数组存储到大数组中
            const data=list.map(item=>{
                console.log('Object.values(item)',Object.values(item));
                return Object.values(item)
            })
            // console.log(headers);
            // console.log(data);
            return {headers,data}
},

    // 导出excel
   async handleDownload() {
 // 步骤: 1发送请求获取数据
       try {
       const res=await getEmployees(this.page,this.size)
       if(res.code!==10000) return
      console.log(res.data.rows,'res.data.rows'); 
       
       // 2需要将获取的数据转换为excel需要的格式  header  data
       const {headers,data}=this.dataForm(res.data.rows)   //传参 并解构   因为调用的这个函数  里面return的是一个对象  需要解构出来才能得到
       
       // 3调用  excel.export_json_to_excel
     //  import('@/vendor/Export2Excel')  懒加载的方式读取一个文件（模块）返回是一个promise实例对象
      import('@/vendor/Export2Excel').then(excel => {
        // excel指的是模块对象(文件对象)，就可以直接调用文件中的任何函数或者使用文件中的任何变量  excel.函数名()   || excel.变量
        console.log(excel, 'excel')
     
        //  excel调用export_json_to_excel()
        excel.export_json_to_excel({
          header: headers,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType
        })
      })
       
    } catch (error) {
      console.log(error);
    }

    },
    // 删除员工
    hDel(id){
      // 弹窗
      this.$confirm('你确定删除此员工吗?').then(async()=>{
        const res=await delEmployees(id)
        // console.log('delEmployees',res);
        // 处理特殊情况,当页面只有一条数据时,让page-1
        if(this.list.length===1){
          this.page--
          // 不能让page一直减下去,这样会到负数
          if(this.page<=0){
            this.page=1
          }
        }
        // 删除完毕重新渲染页面
        this.loadEmployees()
      }).catch(error=>error)

    },
    // 重置表单
      hClose(){
       this.$refs.empDialog.resetForm()
      },
    // 重新渲染数据,并关闭弹窗
    hSuccess(){
      // 获取最大的页码值,
      this.total++
      const maxPage=  Math.ceil(this.total/this.size)
      this.page=maxPage
      this.loadEmployees()
      this.showDialog=false
    },
    // 分页功能
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page=1
        this.size=val
        this.loadEmployees()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page=val
         this.loadEmployees()
      },
      //方法一  枚举  把1换成正式 2换成非正式
    hireTypeFormat(data){
      // data===>1或者2
      // 在employeesEnum.hireType中查找 item.id===传过来的data时 返回与其对应的value值
    // return employeesEnum.hireType.find(item=>item.id===data).value
    // 上面的代码循环太多,容易浪费性能
    return hireType[data]
    },
    // 获取管理员工列表
  async  loadEmployees(){
    try {
       const res=await getEmployees(this.page,this.size)
       if(res.code===10000){
        this.list=res.data.rows
        this.total=res.data.total
       }
    } catch (error) {
      console.log(error);
    }
    }
   }
}
</script>